import { cva } from "class-variance-authority";
import { Text, View } from "@tarojs/components";
import ByIcon from "../ui/ByIcon";

type ReviewProgressItem = {
  text: string;
  status?: "success" | "error" | "active";
};

type ReviewProgressProps = {
  items?: ReviewProgressItem[];
};

const cls = cva("mr-1", {
  variants: {
    type: {
      error: "text-error",
      success: "text-success",
      active: "text-primary",
    },
  },
});

export default ({ items }: ReviewProgressProps) => {
  return (
    <View className="flex items-center">
      {items?.map((item, index) => (
        <>
          {index > 0 && <ByIcon name="ToRight" className="px-1" />}

          <ByIcon
            name={item.status ? "CheckedFill" : "UnChecked"}
            className={cls({ type: item.status })}
          />

          <Text className="text-second">{item.text}</Text>
        </>
      ))}
    </View>
  );
};
